<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片轮播、分页</title>
</head>
<body>
    <div id="app">
        <h1>{{ number }}</h1>

        <img :src=`./img/${number}.jpg` style="width: 300px;" alt="photo" />
        <br/>
        <button @click="prev">上一张</button>
        <button @click="next">下一张</button>

        <ul>
            <li v-for="value in 5">
                <a href="#" @click="jump(value)">{{ value }}</a>
            </li>
        </ul>
    </div>

    <script type="module">
        import {createApp, reactive, ref} from './js/vue.esm-browser.js'

        createApp({
            // setup选项，用于设置响应式数据和方法等 
            setup() {
                const number = ref(3)

                const prev = ()=>{
                    number.value--
                    if (number.value == 0) {
                        number.value = 5
                    }
                }
                const next = ()=>{
                    number.value++
                    if (number.value == 6) {
                        number.value = 1
                    }
                }

                const jump =(value)=>{
                    number.value = value
                }

                return {
                    number,
                    prev,
                    next,
                    jump
                }
            }
        }).mount("#app")
    </script>
</body>
</html>